<template>
<div class="page-container">
    <div class="common-content">
        <div class="search-wrap">
            <el-form :inline="true" :model="searchFilters" :size="searchSize" ref="searchFilters" label-position="right">
                <el-row class="search-input">
                    <el-form-item label="仓库：">
                        <el-input v-model="searchFilters.warehouseCode" clearable placeholder="请输入仓库编码或仓库名称"></el-input>
                    </el-form-item>
                    <el-form-item label="创建日期：" prop="createTimeStartAndEnd">
                        <el-date-picker v-model="searchFilters.createTimeStartAndEnd" type="datetimerange" value-format="yyyy-MM-dd HH:mm:ss" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item label="单据类型：">
                        <el-select clearable v-model="searchFilters.operateId">
                            <el-option v-for="item in operates" :key="item.id" :label="item.optionLabel" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="单据状态：">
                        <el-select clearable v-model="searchFilters.status">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="已完成" value="1"></el-option>
                            <el-option label="待处理" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属商家：">
                        <el-select clearable v-model="searchFilters.deptId" placeholder="请选择">
                            <el-option v-for="item in deptData" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                </el-row>

                <el-row class="search-button">
                    <el-form-item>
                        <el-button type="primary" size="small" @click="findPage()">查询</el-button>
                        <el-button type="primary" size="small" @click="resetForm()">重置</el-button>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row class="t_r w100">
                <el-button-group>
                    <el-button type="primary" size="small" @click="addForm()">新增</el-button>
                    <el-button type="primary" size="small" @click="exportData()">导出</el-button>
                </el-button-group>
            </el-row>
            <!-- 表格数据部分 -->
            <div class="table-wrap">
                <el-table :data="tableData" :size="size" align="align" style="width: 100%" :max-height="450" :stripe="true">
                    <el-table-column prop="deptName" label="所属商家" sortable></el-table-column>
                    <el-table-column prop="storeName" label="仓库名称" sortable></el-table-column>
                    <el-table-column prop="operateDesc" label="单据类型" sortable></el-table-column>
                    <el-table-column prop="code" label="单据编号" sortable></el-table-column>
                    <el-table-column prop="status" label="单据状态" sortable :formatter="statusFormatter"></el-table-column>
                    <el-table-column prop="batchNo" label="批次号" sortable></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" sortable></el-table-column>
                    <el-table-column prop="updateTime" label="最后更新时间" sortable></el-table-column>
                    <el-table-column prop="updater" label="最后更新人Id" sortable></el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handleDetail(scope)">详 情</el-button>
                            <el-button v-if="scope.row.status==0" type="text" size="small" @click="handleEdit(scope)">编 辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!--分页栏v-if="scope.row.status == 1"-->
                <div class="toolbar" style="padding:10px;">
                    <el-pagination layout="total, sizes, prev, pager, next, jumper" @current-change="refreshPageRequest" :current-page="pageRequest.pageNum" :page-size="pageRequest.limit" :total="totalSize" style="float:right;" :page-sizes="[10, 20, 30, 40]" @size-change="handleSizeChange"></el-pagination>
                </div>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import axios from "axios";
import { exportExcel } from "@/utils/excel";
export default {
  components: {},

  data() {
    var checkEndTime = (rule, value, callback) => {
      let this_ = this;
      if (value == null || typeof value == "undefined") {
        callback();
      }
      if (
        this_.searchFilters.createTimeStart == null ||
        typeof this_.searchFilters.createTimeStart == "undefined"
      ) {
        callback();
      }
      if (
        new Date(value).getTime() <
        new Date(this_.searchFilters.createTimeStart).getTime()
      ) {
        callback(new Error("结束时间不能小于开始时间"));
      }
      this_.$refs.searchFilters.clearValidate("createTimeStart");
      callback();
    };
    return {
      tableHeaderList: [
        {
          prop: "deptName",
          label: "所属商家",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "storeName",
          label: "仓库名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "operateDesc",
          label: "单据类型",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "status",
          label: "单据状态",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "batchNo",
          label: "批次号",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "单据状态",
          label: "商品名称",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "createTime",
          label: "创建时间",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "createrTime",
          label: "最后更新时间",
          minWidth: 100,
          formatter: null
        },
        {
          prop: "updater",
          label: "最后更新人Id",
          minWidth: 100,
          formatter: null
        }
      ],
      deptData: [],
      operates: [],
      tableData: [],
      totalSize: 0,
      pageRequest: {
        pageNum: 1,
        pageSize: 10
      },
      searchSize: "mini",
      size: "small",
      searchFilters: {
        warehouseCode: null,
        deptId: null,
        status: null,
        operateId: null
      }
    };
  },

  methods: {
    //单据状态Formatter
    statusFormatter: function(row, column, cellValue, index) {
      if (cellValue == 0) {
        return "待处理";
      } else {
        return "已完成";
      }
    },

    search: function() {
      this.pageRequest.pageNum = 1;
      this.findPage();
    },

    findPage(pageNum) {
      let this_ = this;
      if (this_.searchFilters === undefined || this_.searchFilters === null) {
        this_.searchFilters = {};
      }
      this_.searchFilters.pageNum =
        pageNum === null || pageNum === undefined
          ? this.pageRequest.pageNum
          : pageNum;
      this_.searchFilters.pageSize = this.pageRequest.pageSize;
      this.utils.request.findMStoreOperatePage(this_.searchFilters, function(
        res
      ) {
        if (res.code === "0000") {
          this_.tableData = res.data.rows;
          this_.totalSize = Number(res.data.total);
        } else {
          this_.tableList = [];
          this_.totalSize = 0;
        }
      });
    },

    resetForm(formName) {
      this.searchFilters = {};
      this.findPage(null);
    },

    handleDetail(params) {
      this.$router.push({
        path: "/getMStoreOperateDetail/" + params.row.id + "/2"
      });
    },

    handleEdit(params) {
      this.$router.push({
        path: "/getMStoreOperateDetail/" + params.row.id + "/1"
      });
    },

    addForm(params) {
      params = null;
      this.$router.push({
        path: "/getMStoreOperateDetail/0/0"
      });
    },

    //导出
    exportData() {
      this.$confirm("确定下载列表文件?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          let this_ = this;
          this.utils.request.findMStoreOperatePage(
            this_.searchFilters,
            function(res) {
              exportExcel(
                res.data.rows,
                this_.tableHeaderList,
                "库内事务数据导出"
              );
            }
          );
        })
        .catch(() => {});
    },

    //返回文件名
    returnExcelName: function() {
      let excelName = "库内事务数据导出.xls";
      return excelName;
    },

    //获取操作类型
    getOperate() {
      let this_ = this;
      this.utils.request.getOperateList({}, function(res) {
        if (res.code === "0000") {
          this_.operates = res.data;
        } else {
          this_.$message({
            message: "操作失败, " + data.msg,
            type: "error"
          });
        }
      });
    },

    //获取所属商家
    getDeptList: function() {
      let this_ = this;
      this.utils.request.queryDeptList({}, function(res) {
        if (res.code == "0000") {
          this_.deptData = res.data;
        }
      });
    },

    // 每页数据刷新
    refreshPageRequest: function(pageNum) {
      this.pageRequest.pageNum = pageNum;
      this.findPage();
    },

    // 每页条数刷新
    handleSizeChange: function(pageSize) {
      this.pageRequest.pageSize = pageSize;
      this.findPage();
    }
  },
  mounted() {
    this.findPage();
    this.getOperate();
    this.getDeptList();
  }
};
</script>

<style lang="scss" scoped>
/* ele组件样式重置 */
.common-content {
  padding: 10px;
  box-sizing: border-box;

  .search-wrap /deep/ {
    .el-form-item__label {
      height: 32px;
      line-height: 32px;
    }

    .el-input--mini .el-input__inner {
      height: 32px;
      line-height: 32px;
    }
  }

  .tool-wrap {
    width: 100%;
    height: auto;
    position: relative;
    overflow: hidden;

    .left-area {
      float: left;
      width: 50%;
      text-align: left;

      button {
        margin-right: 15px;
        border-radius: 5px;
      }
    }

    .right-area {
      float: right;
      width: 50%;
      text-align: right;
    }
  }

  /* 表格部分样式 */
  .table-wrap {
    width: 100%;
    max-height: 600px;
    margin-top: 20px;
  }

  /* 弹窗样式 */
  .dialog-wrap /deep/ .el-dialog__footer {
    text-align: center !important;
  }
}
</style>
